<template>
<!-- 
  购物车思路:
    1.进入购物车页面进行渲染(产品列表,勾选列表,全选按钮)
    2.全选/不徐安全的联动(点击每一项商品,点击全选按钮)
    3.进入编辑状态(编辑状态的切换考isEditing来完成)
    4.删除商品(布局和删除请求,删除到为空的时候进行处理)
 -->
  <div>
    <Tips></Tips>
    <!-- 产品列表 -->
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="goodsItemClick(item)"
        :disabled="isEditing"
      >
        <!-- 删除按钮 -->
        <van-swipe-cell>
          <!-- 图片信息 -->
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <!-- 步进器 -->
          <van-stepper
            v-model="item.number"
            v-show="isEditing"
            @change="chanSteNum(item)"
          />
          <!-- 因为每个元素里面都有删除键 所以放在for里面并且包裹着每个元素 -->
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(item.product_id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
      <!-- <van-checkbox name="b">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-checkbox> -->
    </van-checkbox-group>

    <!-- 提交订单 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkdAll" :disabled="isEditing || cartList.length===0"
        >全选</van-checkbox
      >
      <template #tip>
        累积共{{ cartTotal.goodsCount }}件商品,可点击
        <van-button
          :type="isEditing ? 'danger' : 'primary'"
          size="small"
          @click="isEditing = !isEditing"
          >{{ isEditing ? "完成编辑" : "编辑" }}</van-button
        >按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  GetCartDate,
  chanGoodsChecked,
  stepNum,
  DelGoos,
} from "../request/api";
import Tips from "../components/Tips.vue";
import Vue from "vue";
export default {
  computed: {
    checkdAll: {
      get() {
        //受result数组的影响
        //result数组和cartlist数组的长度是不是相等, 相等返回true 否就是false
        //并且长度不为零
        return this.result.length == this.cartList.length && this.cartList.length != 0;
      },
      set(val) {
        if (this.isEditing) return;
        // val: 就是修改成之后的值

        let ids = this.cartList.map((item) => {
          return item.product_id;
        });
        //需要 把id[213,217...] 转成 213,217...
        // join和tostriong 这两种方法都可以转
        //发起全选/不全选请求
        chanGoodsChecked({
          //告诉后端,点击全选按钮之后,要全部成0 或者1
          isChecked: val === false ? "0" : "1",
          productIds: ids.join(), //告诉后端哪些产品需要修改的
        }).then((res) => {
          // console.log(res);
          //调用渲染数据的方法
          this.renderDate(res.data);
        });
      },
    },
  },
  created() {
    GetCartDate().then((res) => {
      console.log(res);
      //调用渲染数据的方法
      this.renderDate(res.data);
    });
  },
  methods: {
    //删除按钮
    del(pid) {
      // console.log('1111');
      DelGoos({
        //转成字符串类型
        productIds: pid.toString(),
      }).then((res) => {
        //调用渲染数据的方法
        this.renderDate(res.data);
      });
    },

    //步进器的方法
    chanSteNum(item) {
      // console.log("步进器");
      stepNum({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        //调用渲染数据的方法
        this.renderDate(res.data);
      });
    },

    //函数封装
    renderDate(data) {
      //每一次渲染数据之前,this.result需要做一个清空,否则 this.result的长度一直叠加 影响到checkAll的这些值
      this.result = [];
      let { cartList, cartTotal } = data;
      //渲染产品列表数据
      this.cartList = cartList;
      this.cartTotal = cartTotal;

      //渲染产品列表每一项是否被选中
      //遍历cartList数组,如果checked为1,我就把item.id放到result里
      cartList.map((item) => {
        item.checked ? this.result.push(item.id) : "";
      });
    },

    onSubmit() {},

    goodsItemClick(item) {
      if (this.isEditing) return;
      //点击每一项商品执行
      // console.log(item.checked);
      //发起请求告诉后端我们选中/取消选中这件商品
      chanGoodsChecked({
        isChecked: item.checked == 1 ? "0" : "1",
        productIds: item.product_id.toString(),
      }).then((res) => {
        console.log(res);
        //拿到数据之后需要重新渲染数据(渲染产品列表数据和产品列表每一项勾选状态)
        //调用渲染数据的方法
        this.renderDate(res.data);
      });
    },
  },
  components: {
    Tips,
  },
  data() {
    return {
      // ui层面,决定了有没有被选中的数组.里面每一个元素可能是 van-checkbox的name属性值
      result: [],
      //购物车数据
      cartList: [],
      //总数信息对象
      cartTotal: {},
      //是否在编辑状态
      isEditing: false,
    };
  },
  // 组件内的守卫
  beforeRouteEnter(to, from, next) {
    // 理解： 比全局的写法更好，不用每次跳转路由都去进行判断
    // 不！能！获取组件实例 this
    // 因为当守卫执行前，组件实例还没被创建
    let token = localStorage.getItem("token");
    if (token) {
      next();
    } else {
      Vue.prototype.$toast("请先登录！");
      // 拿不到不到token，说明没有登录，跳转到 “我的”  /user
      setTimeout(() => {
        next("/user");
      }, 800);
    }
  },
};
</script>
 
<style lang = "less" scoped>
.van-checkbox-group {
  padding: 0.1rem;
  background-color: #fff;
  .van-checkbox {
    border-bottom: 1px solid #ccc;
    padding: 0.1rem;
  }

  /deep/.van-checkbox__label {
    flex: 1;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
  .van-button {
    margin: 0 0.08rem;
  }
}
.van-card__title {
  font-size: 0.18rem;
  line-height: 0.24rem;
  max-height: 0.5rem;
}
.van-card__price,
.van-card__num {
  font-size: 0.16rem;
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}
</style>